<!DOCTYPE html>
<html>
<head>
<title>控制台</title>
#parse("sys/header.html")
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="row">
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
      <span class="info-box-icon bg-aqua">
      	<i class="ion ion-ios-gear-outline"></i>
      </span>
      <div class="info-box-content">
        <span class="info-box-text">交易金额</span>
        <span class="info-box-number">19239</span>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
      <span class="info-box-icon bg-red">
      	<i class="ion ion-ios-gear-outline"></i>
      </span>
      <div class="info-box-content">
        <span class="info-box-text">平均客流</span>
        <span class="info-box-number">467</span>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
      <span class="info-box-icon bg-blue">
      	<i class="ion ion-ios-gear-outline"></i>
      </span>
      <div class="info-box-content">
        <span class="info-box-text">平均单价</span>
        <span class="info-box-number">90</span>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
      <span class="info-box-icon bg-fuchsia">
      	<i class="ion ion-ios-gear-outline"></i>
      </span>
      <div class="info-box-content">
        <span class="info-box-text">上日交易金额</span>
        <span class="info-box-number">92320</span>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="box">
      <div class="box-header with-border">
        <h3 class="box-title">月报</h3>
      </div>
    </div>
  </div>
  <div class="box-body">
    <div class="row">
      <div class="col-md-8">
        <p class="text-center">
          <strong>日期: 1 Jan, 2017 - 30 Jul, 2017</strong>
        </p>

        <div class="chart">
          <!-- Sales Chart Canvas -->
          <div id="main" style="width:700px;height:200px;"></div>
        </div>
        <!-- /.chart-responsive -->
      </div>
      <!-- /.col -->
      <div class="col-md-4">
        <p class="text-center">
          <strong>Goal Completion</strong>
        </p>

        <div class="progress-group">
          <span class="progress-text">Add Products to Cart</span>
          <span class="progress-number"><b>160</b>/200</span>

          <div class="progress sm">
            <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
          </div>
        </div>
        <!-- /.progress-group -->
        <div class="progress-group">
          <span class="progress-text">Complete Purchase</span>
          <span class="progress-number"><b>310</b>/400</span>

          <div class="progress sm">
            <div class="progress-bar progress-bar-red" style="width: 80%"></div>
          </div>
        </div>
        <!-- /.progress-group -->
        <div class="progress-group">
          <span class="progress-text">Visit Premium Page</span>
          <span class="progress-number"><b>480</b>/800</span>

          <div class="progress sm">
            <div class="progress-bar progress-bar-green" style="width: 80%"></div>
          </div>
        </div>
        <!-- /.progress-group -->
        <div class="progress-group">
          <span class="progress-text">Send Inquiries</span>
          <span class="progress-number"><b>250</b>/500</span>

          <div class="progress sm">
            <div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
          </div>
        </div>
        <!-- /.progress-group -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div>
  <div class="box-footer">
    <div class="row">
      <div class="col-sm-3 col-xs-6">
        <div class="description-block border-right">
          <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
          <h5 class="description-header">$35,210.43</h5>
          <span class="description-text">总收入</span>
        </div>
        <!-- /.description-block -->
      </div>
      <!-- /.col -->
      <div class="col-sm-3 col-xs-6">
        <div class="description-block border-right">
          <span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>
          <h5 class="description-header">$10,390.90</h5>
          <span class="description-text">总支出</span>
        </div>
        <!-- /.description-block -->
      </div>
      <!-- /.col -->
      <div class="col-sm-3 col-xs-6">
        <div class="description-block border-right">
          <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
          <h5 class="description-header">$24,813.53</h5>
          <span class="description-text">毛利润</span>
        </div>
        <!-- /.description-block -->
      </div>
      <!-- /.col -->
      <div class="col-sm-3 col-xs-6">
        <div class="description-block">
          <span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
          <h5 class="description-header">1200</h5>
          <span class="description-text">净利润</span>
        </div>
        <!-- /.description-block -->
      </div>
    </div>
    <!-- /.row -->
  </div>
  
  
</div>
<div class="row">
  <div id="main1" style="width: 100%;height:400px;"></div>
</div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

option = {
    title : {
        text: '本月趋势图',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['支付宝','微信']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    series : [
        {
            name:'最高交易额',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最小交易额',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
                data : [
                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

var myChart1 = echarts.init(document.getElementById('main1'));
option1 = {
	    title : {
	        text: '某站点用户访问来源',
	        subtext: '纯属虚构',
	        x:'center'
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient : 'vertical',
	        x : 'left',
	        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {
	                show: true, 
	                type: ['pie', 'funnel'],
	                option: {
	                    funnel: {
	                        x: '25%',
	                        width: '50%',
	                        funnelAlign: 'left',
	                        max: 1548
	                    }
	                }
	            },
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    calculable : true,
	    series : [
	        {
	            name:'访问来源',
	            type:'pie',
	            radius : '55%',
	            center: ['50%', '60%'],
	            data:[
	                {value:335, name:'直接访问'},
	                {value:310, name:'邮件营销'},
	                {value:234, name:'联盟广告'},
	                {value:135, name:'视频广告'},
	                {value:1548, name:'搜索引擎'}
	            ]
	        }
	    ]
	};

myChart1.setOption(option1);
</script>
</body>
</html>